<template>
  <div class="supplier_view footer-page">
    <el-form ref="viewForm" :model="viewForm" :rules="rules" class="demo-ruleForm" :class="{ 'edit_form': isEdit }">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="基本信息" name="base">
          <p class="edit-header">
            <span>店铺信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>店铺头像:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.photo" />
                    <el-form-item v-else prop="photo">
                      <crop-upload show-type="photo" :init-val="viewForm.photo" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('photo', val)" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>店铺名称:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.shopname }}</p>
                    <el-form-item v-else prop="shopname">
                      <el-input v-model="viewForm.shopname" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <!--         <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span
                      v-if="isEdit"
                      class="required-icon"
                    >*</span>经营项目:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{viewForm.category_name}}</p>
                    <el-form-item
                      v-else
                      prop="category_name"
                    >
                      <el-input
                        disabled
                        v-model="viewForm.category_name"
                      ></el-input>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span
                      v-if="isEdit"
                      class="required-icon"
                    >*</span>账户类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{viewForm.account_name}}</p>
                    <el-form-item
                      v-else
                      prop="account"
                    >
                      <el-select
                        clearable
                        v-model="viewForm.account"
                        @change="accountTypeChange"
                      >
                        <el-option
                          label="融资账户"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="非融资账户"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row> -->
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>是否风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.account_type_name }}</p>
                    <el-form-item v-else prop="account_type">
                      <el-select v-model="viewForm.account_type" clearable :disabled="viewForm.account == 1">
                        <el-option label="风控" :value="1" />
                        <el-option label="不风控" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>发票类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.faptype_name }}</p>
                    <el-form-item v-else prop="faptype">
                      <el-select v-model="viewForm.faptype" clearable>
                        <el-option label="普通发票" value="1" />
                        <el-option label="增值税发票" value="2" />
                        <el-option label="普通发票+增值税发票" value="1,2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>当前经营位置:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ shopcity }}</p>
                    <el-form-item v-else prop="shopcity">
                      <el-cascader v-model="viewForm.shopcity" clearable filterable placeholder="请选择当前经营位置" :options="regionList" :props="optionProps" separator="-" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>店铺联系人:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.people }}</p>
                    <el-form-item v-else prop="people">
                      <el-input v-model="viewForm.people" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>联系人手机号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.contact_tel }}</p>
                    <el-form-item v-else prop="contact_tel">
                      <el-input v-model="viewForm.contact_tel" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>客服电话:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.mobile }}</p>
                    <el-form-item v-else prop="mobile">
                      <el-input v-model="viewForm.mobile" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>签署合同类型:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.contract_type_name }}</p>
                    <el-form-item v-else prop="contract_type">
                      <el-select v-model="viewForm.contract_type" clearable @change="contractTypeChange">
                        <el-option label="蚂蚁智能合同" :value="1" />
                        <el-option label="E签宝合同" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>签署方式:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.sign_num_name }}</p>
                    <el-form-item v-else prop="sign_num">
                      <el-select v-model="viewForm.sign_num" :disabled="viewForm.contract_type == 1" clearable>
                        <el-option label="自营两方" :value="1" />
                        <el-option label="供应商两方" :value="2" />
                        <el-option label="三方" :value="3" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label>是否开启城市定位:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.is_city_location_name }}</p>
                    <el-form-item v-else prop="is_city_location">
                      <el-select v-model="viewForm.is_city_location" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>店铺邮箱:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.email }}</p>
                    <el-form-item v-else prop="email">
                      <el-input v-model="viewForm.email" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label>店铺费率:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.shop_rate + '%' }}</p>
                    <el-form-item v-else prop="shop_rate">
                      <el-input v-model="viewForm.shop_rate" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label>取货地址:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.company_address }}</p>
                    <el-form-item v-else prop="company_address">
                      <el-input v-model="viewForm.company_address" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
            <!-- <el-row :gutter="20">
              <el-col
                v-if="isEdit"
                :span="24"
              >
                <div class="flex">
                  <label><span class="required-icon">*</span>是否开启城市定位:</label>
                  <div class="flex-1">
                    <el-form-item prop="is_city_location">
                      <el-select
                        clearable
                        v-model="viewForm.is_city_location"
                      >
                        <el-option
                          label="开启"
                          :value="1"
                        ></el-option>
                        <el-option
                          label="关闭"
                          :value="2"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row> -->
          </div>
          <p class="edit-header">
            <span>公司信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>公司名称:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.mechanism }}</p>
                    <el-form-item v-else prop="mechanism">
                      <el-input v-model="viewForm.mechanism" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>工商注册号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.companyid }}</p>
                    <el-form-item v-else prop="companyid">
                      <el-input v-model="viewForm.companyid" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex area_item">
                  <label><span v-if="isEdit" class="required-icon">*</span>公司所在区域:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ companyArea }}</p>
                    <el-form-item v-else prop="company_area">
                      <el-cascader v-model="viewForm.company_area" clearable filterable placeholder="请选择公司所在区域" :options="areaList" :props="optionProps" separator="-" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>公司地址:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.company }}</p>
                    <el-form-item v-else prop="company">
                      <el-input v-model="viewForm.company" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>法人姓名:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.faname }}</p>
                    <el-form-item v-else prop="faname">
                      <el-input v-model="viewForm.faname" :maxlength="10" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>法人身份证号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.idcard }}</p>
                    <el-form-item v-else prop="idcard">
                      <el-input v-model="viewForm.idcard" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>营业执照:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.shopcard" />
                    <el-form-item v-else prop="shopcard">
                      <crop-upload show-type="photo" :init-val="viewForm.shopcard" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('shopcard', val)" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>公司门头照:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.doorphoto" />
                    <el-form-item v-else prop="doorphoto">
                      <crop-upload show-type="photo" :init-val="viewForm.doorphoto" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('doorphoto', val)" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>公章图片:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.seal_url" />
                    <el-form-item v-else prop="seal_url">
                      <crop-upload show-type="photo" :init-val="viewForm.seal_url" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('seal_url', val)" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>身份证正面照:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.faidcard" />
                    <el-form-item v-else prop="faidcard">
                      <crop-upload show-type="photo" :init-val="viewForm.faidcard" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard', val)" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>身份证背面照:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.faidcard_back" />
                    <el-form-item v-else prop="faidcard_back">
                      <crop-upload show-type="photo" :init-val="viewForm.faidcard_back" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('faidcard_back', val)" />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>法人身份证明:</label>
                  <div class="flex-1">
                    <preview-img v-if="!isEdit" :img-url="viewForm.notar_img" />
                    <el-form-item v-else prop="notar_img">
                      <crop-upload show-type="photo" :init-val="viewForm.notar_img" wrapper-width="95px" wrapper-height="95px" @setVal="(val) => setUrl('notar_img', val)" />
                    </el-form-item>
                  </div>
                  <div class="color-999">
                  <el-popover placement="right" width="400" trigger="hover">
                    <el-button style="position:relative;right:400px" type="text" slot="reference">图片示例></el-button>
                    <div class="img_exp">
                      <h5>商品封面图片示例</h5>
                      <div class="exp_wrap">
                        <p class="item">
                          <el-image style="width: 300px; height: 300px" :src="require('@/assets/images/notar_img.png')"></el-image>
                          <span><i class="green-font el-icon-success"></i>推荐</span>
                        </p>
                      </div>
                    </div>
                    
                  </el-popover>
                </div>
                        </div>
              </el-col>
            </el-row>
          </div>
          <template v-if="!isEdit">
            <p class="edit-header">
              <span>操作记录</span>
            </p>
            <div class="info_list">
              <el-table :data="tableData">
                <el-table-column prop="operation_content" label="内容" />
                <el-table-column prop="operator" label="操作人" width="180" />
                <el-table-column prop="operation_time" label="操作时间" width="200" />
              </el-table>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane label="提现信息" name="withdraw">
          <p class="edit-header">
            <span>支付宝信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label>支付宝姓名:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.payeename }}</p>
                    <el-form-item v-else prop="payeename">
                      <el-input v-model="viewForm.payeename" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="flex">
                  <label>支付宝账号:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.alipayaccount }}</p>
                    <el-form-item v-else prop="alipayaccount">
                      <el-input v-model="viewForm.alipayaccount" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <p class="edit-header">
            <span>银行卡信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="flex">
                  <label>账户名:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.bankname }}</p>
                    <el-form-item v-else prop="bankname">
                      <el-input v-model="viewForm.bankname" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="flex">
                  <label>账户号码:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.bankaccount }}</p>
                    <el-form-item v-else prop="bankaccount">
                      <el-input v-model="viewForm.bankaccount" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col><el-col :span="8">
                <div class="flex">
                  <label>开户行:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.bankcreate }}</p>
                    <el-form-item v-else prop="bankcreate">
                      <el-input v-model="viewForm.bankcreate" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="增值服务信息" name="service">
          <p class="edit-header">
            <span>短信增值服务信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>短信剩余数量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.sms_num }}</p>
                    <el-form-item v-else prop="sms_num">
                      <el-input v-model="viewForm.sms_num" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>布尔数据信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启布尔数据:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_status_boolea == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_credit_status_boolea" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>布尔数据余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_amount_boolea }}</p>
                    <el-form-item v-else prop="risk_credit_amount_boolea">
                      <el-input v-model="viewForm.risk_credit_amount_boolea" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>百融风控信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启百融风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_status == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_credit_status" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>百融风控余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_amount }}</p>
                    <el-form-item v-else prop="risk_credit_amount">
                      <el-input v-model="viewForm.risk_credit_amount" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>征信风控信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启征信风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_credit_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>征信风控余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_credit_amount_credit }}</p>
                    <el-form-item v-else prop="risk_credit_amount_credit">
                      <el-input v-model="viewForm.risk_credit_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>雷达风控信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启雷达风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_radar_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_radar_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>雷达风控余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_radar_amount_credit }}</p>
                    <el-form-item v-else prop="risk_radar_amount_credit">
                      <el-input v-model="viewForm.risk_radar_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>蚂蚁风控信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启蚂蚁风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_ant_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_ant_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>蚂蚁风控余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_ant_amount_credit }}</p>
                    <el-form-item v-else prop="risk_ant_amount_credit">
                      <el-input v-model="viewForm.risk_ant_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>还款风控信息</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启还款风控:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_ab_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_ab_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>还款风控余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_ab_amount_credit }}</p>
                    <el-form-item v-else prop="risk_ab_amount_credit">
                      <el-input v-model="viewForm.risk_ab_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>上报征信</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启上报征信:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_new_up_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_new_up_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>上报征信余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_new_up_amount_credit }}</p>
                    <el-form-item v-else prop="risk_new_up_amount_credit">
                      <el-input v-model="viewForm.risk_new_up_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>新版征信</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启新版征信:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_new_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_new_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>新版征信余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_new_amount_credit }}</p>
                    <el-form-item v-else prop="risk_new_amount_credit">
                      <el-input v-model="viewForm.risk_new_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
          <p class="edit-header">
            <span>协议公证</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启协议公证:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.shop_lease == 2 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.shop_lease" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="2" />
                        <el-option label="关闭" :value="1" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <p class="edit-header">
            <span>手机二要素</span>
          </p>
          <div class="info_list">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="flex">
                  <label>是否开启手机二要素:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_mobile_status_credit == 1 ? '开启' : '关闭' }}</p>
                    <el-form-item v-else class="guarantee_item" style="margin-bottom:0">
                      <el-select v-model="viewForm.risk_mobile_status_credit" style="width:100px;margin-bottom:10px" clearable>
                        <el-option label="开启" :value="1" />
                        <el-option label="关闭" :value="2" />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="flex">
                  <label><span v-if="isEdit" class="required-icon">*</span>手机二要素余量:</label>
                  <div class="flex-1">
                    <p v-if="!isEdit">{{ viewForm.risk_mobile_amount_credit }}</p>
                    <el-form-item v-else prop="risk_mobile_amount_credit">
                      <el-input v-model="viewForm.risk_mobile_amount_credit" clearable />
                    </el-form-item>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" />
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div v-if="$hasMethod('#edit')" class="page-footer-btns">
      <template v-if="!isEdit">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button size="small" type="primary" @click="isEdit = true">修改信息</el-button>
      </template>
      <template v-else>
        <el-button size="small" @click="cancelEdit">返回</el-button>
        <el-button size="small" type="primary" @click="submit">保存</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import previewImg from '@/components/previewImg'
import { getSupplierInfo, editSupplier } from '@/api/user'
import cropUpload from '@/components/cropUpload'
import { checkPhone, checkCompanyId, checkCardId, checkMobile, checkEmail } from '@/utils/validate'
import { getRegion } from '@/api/order'
export default {
  components: { previewImg, cropUpload },
  // props: ['viewId', 'toEdit'],
  props: {
    viewId: {
      type: String,
      default: ''
    },
    toEdit: {
      type: String,
      default: ''
    }
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!checkPhone(value) && !checkMobile(value)) {
        callback(new Error('客服电话格式错误'))
      } else {
        callback()
      }
    }
    const validateTel = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error('联系人手机号格式错误'))
      } else {
        callback()
      }
    }
    const validateCompanyId = (rule, value, callback) => {
      if (!checkCompanyId(value)) {
        callback(new Error('工商注册号格式错误'))
      } else {
        callback()
      }
    }
    const validateIdcard = (rule, value, callback) => {
      if (!checkCardId(value)) {
        callback(new Error('法人身份证号格式错误'))
      } else {
        callback()
      }
    }
    // const validateName = (rule, value, callback) => {
    //   if (value && !checkName(value)) {
    //     callback(new Error('支付宝姓名格式错误'))
    //   } else {
    //     callback()
    //   }
    // }
    // const validateAccount = (rule, value, callback) => {
    //   if (value && !checkAlipayAccount(value)) {
    //     callback(new Error('支付宝账号格式错误'))
    //   } else {
    //     callback()
    //   }
    // }
    const validateCount = (rule, value, callback) => {
      if (/^(\-|\+)?\d+(\.\d+)?$/.test(value)) {
        callback()
      } else {
        callback(new Error('数量输入错误'))
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (value && !checkEmail(value)) {
        callback(new Error('店铺邮箱格式错误'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'base',
      isEdit: false,
      tableData: [],
      viewForm: {},
      rules: {
        shopname: [
          { required: true, message: '店铺名称不能为空', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请选择账户类型', trigger: 'change' }
        ],
        account_type: [
          { required: true, message: '请选择是否开启风控', trigger: 'change' }
        ],
        faptype: [
          { required: true, message: '请选择发票类型', trigger: 'change' }
        ],
        shopcity: [
          { required: true, message: '当前经营位置不能为空', trigger: 'change' }
        ],
        people: [
          { required: true, message: '店铺联系人不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '客服电话不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        contact_tel: [
          { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
          { validator: validateTel, trigger: 'blur' }
        ],
        contract_type: [
          { required: true, message: '请签署合同类型', trigger: 'change' }
        ],
        sign_num: [
          { required: true, message: '请选择签署方式', trigger: 'change' }
        ],
        mechanism: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '店铺邮箱不能为空', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        companyid: [
          { required: true, message: '工商注册号不能为空', trigger: 'blur' },
          { validator: validateCompanyId, trigger: 'blur' }
        ],
        company_area: [
          { required: true, message: '请选择公司所在区域', trigger: 'change' }
        ],
        company: [
          { required: true, message: '公司地址不能为空', trigger: 'blur' }
        ],
        faname: [
          { required: true, message: '法人姓名不能为空', trigger: 'blur' }
        ],
        idcard: [
          { required: true, message: '法人身份证号不能为空', trigger: 'blur' },
          { validator: validateIdcard, trigger: 'blur' }
        ],
        shopcard: [
          { required: true, message: '请上传营业执照', trigger: 'change' }
        ],
        photo: [
          { required: true, message: '请上传店铺头像', trigger: 'change' }
        ],
        doorphoto: [
          { required: true, message: '请上传公司门头照', trigger: 'change' }
        ],
        seal_url: [
          { required: true, message: '请上传公章图片', trigger: 'change' }
        ],
        faidcard: [
          { required: true, message: '请上传身份证正面照', trigger: 'change' }
        ],
        faidcard_back: [
          { required: true, message: '请上传身份证背面照', trigger: 'change' }
        ],
        is_city_location: [
          { required: true, message: '请选择是否开启城市定位', trigger: 'change' }
        ],
        alipayaccount: [
          { required: true, message: '支付宝账号不能为空', trigger: 'blur' }
        ],
        bankaccount: [
          { required: true, message: '银行卡账号不能为空', trigger: 'blur' }
        ],
        sms_num: [
          { required: true, message: '短信剩余数量不能为空', trigger: 'blur' },
          { validator: validateCount, trigger: 'blur' }
        ],
        risk_credit_amount: [
          { required: true, message: '风控余量不能为空', trigger: 'blur' },
          { validator: validateCount, trigger: 'blur' }
        ]
      },
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      regionList: [],
      areaList: [],
      shopcity: '',
      companyArea: ''
    }
  },
  mounted() {
    this.getData()
    this.getProvice()
  },
  methods: {
    getAreaId(arr) {
      for (const p of this.areaList) {
        if (p.name === arr[0]) {
          for (const c of p.sub) {
            if (c.name === arr[1]) {
              return c.id
            }
          }
        }
      }
      return ''
    },
    contractTypeChange(val) {
      if (val === 1) {
        this.viewForm.sign_num = 1
      }
    },
    accountTypeChange(val) {
      if (val === 1) {
        this.viewForm.account_type = 1
      }
    },
    setUrl(key, value) {
      this.viewForm[key] = value
    },
    handleTabClick(tab, event) {
      // this.cancelEdit();
    },
    // 取消更改
    cancelEdit() {
      if (this.toEdit) {
        this.$router.back()
      } else {
        this.isEdit = false
        this.getData()
      }
    },
    // 保存提交
    submit() {
      this.$refs['viewForm'].validate((valid) => {
        if (valid) {
          const params = {
            photo: '',
            shopname: '',
            account: null,
            account_type: null,
            faptype: '',
            shopcity: '',
            people: '',
            mobile: '',
            email: '',
            contact_tel: '',
            contract_type: null,
            sign_num: null,
            mechanism: '',
            companyid: '',
            company_area: '',
            area_id: '',
            company: '',
            faname: '',
            idcard: '',
            shopcard: '',
            doorphoto: '',
            seal_url: '',
            faidcard: '',
            faidcard_back: '',
            notar_img:'',
            is_city_location: 2,
            payeename: '',
            alipayaccount: '',
            sms_num: 0,
            risk_credit_status: '',
            risk_credit_amount: '',
            risk_credit_status_boolea: '',
            risk_credit_amount_boolea: '',
            risk_credit_status_credit: '',
            risk_credit_amount_credit: '',
            risk_radar_amount_credit:'',
            risk_radar_status_credit:'',
            risk_ant_amount_credit:'',
            risk_ant_status_credit:'',
            risk_ab_status_credit:'',
            risk_ab_amount_credit:'',
            risk_new_up_status_credit:'',
            risk_new_up_amount_credit:'',
            risk_new_status_credit:'',
            risk_new_amount_credit:'',
            risk_mobile_status_credit:'',
            risk_mobile_amount_credit:'',
            shop_lease:'',
            shop_rate: '',
            company_address:'',
            bankname:'',
            bankaccount:'',
            bankcreate:''
          }
          for (const key in params) {
            params[key] = this.viewForm[key]
          }
          params.id = this.viewId
          params.area_id = this.getAreaId(params.company_area)
          params.company_area = params.company_area.join('-')
          params.shopcity = params.shopcity.join('-')
          // console.log(params);
          editSupplier(params).then(res => {
            this.isEdit = false
            this.getData()
          })
        } else {
          this.$message({
            message: '表单信息不完整或有错误，请检查完整表单',
            type: 'error'
          })
          return false
        }
      })
    },
    getData() {
      getSupplierInfo(this.viewId).then(res => {
        // console.log(res);
        this.viewForm = { ...res.shopInfo, ...res.companyInfo, ...res.withdrawInfo, ...res.incrementInfo, ...res.functionSetInfo }
        this.tableData = res.operationRecord
        this.shopcity = this.viewForm.shopcity
        const cityArr = this.viewForm.shopcity.split('-')
        this.viewForm.shopcity = cityArr
        this.companyArea = this.viewForm.company_area
        const areaArr = this.viewForm.company_area.split('-')
        this.viewForm.company_area = areaArr
        if (this.toEdit) {
          this.isEdit = true
          this.$route.meta.title = '编辑供应商资料'
        } else {
          this.$route.meta.title = '查看供应商资料'
        }
      })
    },
    getProvice() {
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : []
        this.areaList = res ? [...res[0].sub] : []
        const index = this.areaList.findIndex(k => k.id === 7459)
        this.areaList.splice(index, 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.supplier_view {
  .info_list {
    padding: 20px 0;
  }

  .el-image {
    width: 95px;
    height: 95px;
  }

  .el-row {
    margin-bottom: 20px;
  }

  label {
    width: 200px;
    margin-right: 10px;
  }
}

.item_inline_form {
  display: inline-block;
  margin-left: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  margin-bottom: 10px;

  &>span {
    display: inline-block;
    height: 100%;
    background-color: $gray-bg;
    padding: 0 10px;
    border-right: 1px solid #e6e6e6;
  }

  /deep/.el-input__inner {
    border: none;
  }
}

.tip {
  color: #bbbbbb;
  padding-left: 210px;
}

.edit_form label {
  padding-top: 12px;
}

.required-icon {
  margin-right: 2px;
}
</style>
<style lang="scss">
.guarantee_item,
.area_item {
  .el-select .el-input {
    width: 100%;
  }
}

.area_item .el-form-item {
  margin-bottom: 10px;
}
</style>
